import { useWindowDimensions, View } from "react-native";
import Tabs from "../../../components/Tabs";
import React, { useState } from "react";
import LinearGradient from "react-native-linear-gradient";
import { TabView, SceneMap } from 'react-native-tab-view';
import TabGenshin from "./tab-genshin";
import TabStarRails from "./tab-starrails";
import TabZZZ from "./tab-zzz";
import TabHonkai2 from "./tab-honkai2";
import TabHonkai3 from "./tab-honkai3";
import TabWeiding from "./tab-weiding";
import TabDby from "./tab-dby";


const TAB_ITEMS = [
  { key: 'genshin', title: "原神", color: "#87CEFA", },
  { key: 'starrails', title: "崩坏：星穹铁道", color: "#E6E6FA" },
  { key: 'zzz', title: "绝区零", color: "#ADD8E6" },
  { key: 'honkai3', title: "崩坏3", color: "#FFB6C1" },
  { key: 'honkai2', title: "崩坏学园2", color: "#FFA07A" },
  { key: 'weiding', title: "未定事件簿", color: "#F8F8FF" },
  { key: 'dby', title: "大别野", color: "#EEE" },
]

const renderScene = SceneMap({
  genshin: TabGenshin,
  starrails: TabStarRails,
  zzz: TabZZZ,
  honkai3: TabHonkai3,
  honkai2: TabHonkai2,
  weiding: TabWeiding,
  dby: TabDby,
});

const TAB_KEY_TO_BG = TAB_ITEMS.reduce((acc, item) => {
  acc[item.key] = item.color
  return acc
}, {} as Record<string, string>);

const TAB_KEY_TO_INDEX = TAB_ITEMS.reduce((acc, item, index) => {
  acc[item.key] = index
  return acc
}, {} as Record<string, number>);

export default function MainPage() {
  const layout = useWindowDimensions();
  const [activeTabKey, setActiveTabKey] = useState('genshin')

  return (
    <LinearGradient
      colors={[TAB_KEY_TO_BG[activeTabKey], '#eee']}
      style={{ flex: 1 }}>
      <View style={{ paddingTop: 20, flex: 1, }}>
        <Tabs items={TAB_ITEMS} activeKey={activeTabKey} onChange={setActiveTabKey} />
        <TabView
          renderTabBar={() => null}
          navigationState={{ index: TAB_KEY_TO_INDEX[activeTabKey], routes: TAB_ITEMS }}
          renderScene={renderScene}
          animationEnabled={false}
          onIndexChange={(index) => setActiveTabKey(TAB_ITEMS[index].key)}
          initialLayout={{ width: layout.width }}
        />
      </View>
    </LinearGradient>
  );
}
